<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【CSS-task7】主流浏览器内核有哪几种？</h2>
            <h3>小课堂【上海第40期】</h3>
            <p>分享人：王梦男</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <section>
                <p>背景介绍</p>
            </section>
            <!--<section>-->
                <!--<p>主流浏览器的内核介绍</p>-->
                <!--<p>1.什么是浏览器的内核？</p>-->
                <!--<p>2.它在浏览器中的作用是什么？</p>-->
                <!--<p>3.四大浏览器内核介绍</p>-->
                <!--<p>4.各浏览器及版本的市场份额</p>-->
                <!--<p>5.CSS3中-ms-,-moz-,-webkit-,-o-浏览器私有前缀详解</p>-->
                <!--<p>6.参考文献</p>-->
            <!--</section>-->
        </section>
        <section>
            <h3>什么是浏览器的内核？</h3>
        </section>
        <section>
            <p>浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。</p>
        </section>
        <section>
            <h3>2.它在浏览器中的作用是什么？</h3>
        </section>
        <section>
            <p>浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。 </p>
        </section>
        <section>
            <p>2.知识剖析</p>
        </section>
        <section>
            <h3>1.四大浏览器内核介绍</h3>
            <p>(1)Trident内核</p>
            <p>(2)Gecko内核</p>
            <p>(3)WebKit内核</p>
            <p>(4)Blink内核</p>
        </section>
        <section>
            <h3>(1)Trident内核</h3>
            <p>该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大。 </p>
        </section>
        <section>
            <p>微软很长时间都并没有更新Trident内核，这也导致了后面的两个后果： 一是Trident内核曾经几乎与W3C标准脱节（2005年） 二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览 器，Firefox和Opera就是这个时候兴起的。Trident内核的常见浏览器有：IIE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；以及国产浏览器中的兼容模式。 </p>
        </section>
        <section>
            <h3>(2)Gecko内核</h3>
            <p>Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。</p>
        </section>
        <section>
            <h3>(3)WebKit内核</h3>
            <p>Webkit:是苹果公司自主研发的内核，也是Safari浏览器使用的内核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核。</p>
        </section>
        <section>
            <h3>(4)Blink内核</h3>
            <p>Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）中使用。</p>
        </section>
        <section>
            <p>4.各浏览器及版本的市场份额</p>
            <a href="http://gs.statcounter.com/" target="_blank">点我</a>
        </section>
        
        <section>
            <p>3.常见问题</p>
        </section>
        <section>
            <p>为什么浏览器的兼容性是前端开发者所诟病的一个顽疾呢？</p>
        </section>
        <section>
            <p>4.解决方案</p>
        </section>
        <section>
             <p>所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。</p>
        </section>
        <section>
            <p>在上古时期，IE横行的年代，前端开发人员通过<a href="http://blog.csdn.net/freshlover/article/details/12132801" target="_blank">CSS hack</a>技术达到想要的想过,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。</p>
            
            <p>JS方面：IE的早期版本对w3c标准的支持相当的不友好，以至于Chrome,FireFox的市场占有率与其平起平坐的时候，前端开发人员在写JS功能时不得不同时兼容2到3种浏览器，开发效率及其低下。<随之出现的></随之出现的>jQuery以良好的兼容性深得开发人员的追捧，成为一代神话。</p>
        </section>
        <section>
            <p>如今，webkit内核的浏览器成为主流，开源化的内核得到了许多浏览器厂商的青睐，浏览器之间的兼容性问题也就不是什么问题了。</p>
        </section>
        <section>
            <p>5.编码实战</p>
        </section>
        <section>
            <p>如何在国产双核浏览器中强制使用webkit内核</p>
        </section>
        <section>
            <span><img src="../img/css-07-browser2/css内核.png" alt=""></span>
        </section>
            
        <section>
            <p>6.扩展思考</p>
        </section>
        <section>
            <p>在我们的日常开发过程中，是否还需要向下兼容其它浏览器，例如：ie8 ?</p>
        </section>
        <section>
        	<h3>7.参考资料</h3>
        	<p>1.http://www.jianshu.com/p/b6a893cc1b0c</p>
        	<p>2.http://gs.statcounter.com/</p>
            <p>http://tongji.baidu.com/data/browser</p>
        </section>
        <section>
            <h3>8.课后思考</h3>
        </section>
        <section>
            <p>FireFox和Chrome浏览器的js引擎各是什么？哪个引擎将会成为主流？</p>
        </section>
        <section>
            <p>感谢大家观看</p>
            <p>BY : 郑新胜 | 杨超 | 杨泽平</p>
        </section>
    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>

    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }

    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            { src: '../plugin/markdown/marked.js' },
            { src: '../plugin/markdown/markdown.js' },
            { src: '../plugin/notes/notes.js', async: true },
            { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
</script>
</body>
</html>

